<style scoped>
.logo-img {
  /* width: 14px; */
  position: absolute;
  top: 6px;
  left: 30px;
}
.top-header{
  min-width: 1280px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.SearchPanel {
  background-color: #38aae0;
  width: 464px;
  height: 560px;
  float: right;
  -webkit-clip-path: polygon(
    0% 10%,
    8% 2%,
    95% 2%,
    95% 2%,
    95% 100%,
    95% 100%,
    8% 100%,
    0 92%
  );
  clip-path: polygon(
    0% 10%,
    8% 2%,
    95% 2%,
    95% 2%,
    95% 100%,
    95% 100%,
    8% 100%,
    0 92%
  );
  border: 4px solid #38aae0;
  position: relative;
  z-index: 2;
}
.SearchOpen {
  position: fixed;
  z-index: 2;
  right: 26px;
  top: 81px;
  background-color: rgba(4, 13, 38, 0.8);
  width: 30px;
  height: 30px;
  border-radius: 4px;
  text-align: center;
  line-height: 34px;
}
.SearchOpen img:hover {
  cursor: pointer;
}
.main_top img:hover {
  cursor: pointer;
}
/*搜索图标样式*/
.transition-box >>> .el-input-group__append {
  background: transparent;
  padding: 0 5px;
}
/*左边栏*/
.card-out {
  position: fixed;
  top: 70px;
  left: 5px;
  z-index: 1;
  font-size: 12px;
  border-radius: 4px;
}
.card-out >>> .el-card {
  border-radius: 4px;
  border: none;
}
.card-out >>> .el-card__header {
  padding: 5px 10px;
  background: #213477;
  color: #fff;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px; /* border-top-left-radius: 10px;
  border-top-right-radius: 10px; */
}
.card-out >>> .el-card__body {
  padding: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.card-out >>> .el-checkbox {
  left: -5px;
}
/*雨量选择框*/
.card-out >>> .rain-checkBox{
  left:15px;
}
.clearfix img {
  width: 12px;
}
.box-card {
  /* min-width: 300px; */
  width: 260px;
  max-width: 300px;
  background-color: #fff;
  color: #000;
}
.box-card img:hover {
  cursor: pointer;
}
.transition-box {
  /* width: 200px;
    height: 100px; */
  border-radius: 4px;
  text-align: left;
  /* color: #000; */
  padding: 0px 20px 12px;
  box-sizing: border-box;
}
.card-body-title {
  margin-top: 15px;
}
.right-search {
  margin: 15px;
  color: #444;
  font-size: 14px;
}
.right-search >>> .el-input-group__append {
  background: transparent;
}
.seclect-box >>> .el-input__inner {
  height: 26px;
  background: transparent;
  color: #444;
}
.seclect-box >>> .popper__arrow {
  display: none;
}
.monitor-detail {
  margin-bottom: 14px;
  padding: 0;
  display: inline-block;
}
/*根据设计，暂时将下列模块隐藏*/
.waterSystem,
.changjiang-all {
  display: none;
}
.rain,
.pipe,
.pipespg,
.pipeq {
  display: none;
}
/*中间弹出框*/
.main_center >>> .ol-popup {
  min-height: 460px;
  height: 460px;
  /* height: 100%; */
  /* overflow: auto; */
  background: #fff;
}
/*左侧实时监测*/
.monitor {
  display: inline-block;
  position: relative;
  min-width: 250px;
  width: 72%; /*70%*/
  margin-left: 10px;
}
.monitor .river img,
.monitor .lakes img,
.monitor .reservoir img,
.monitor .gate img,
.monitor .canal img,
.monitor .waterlogging img {
  margin-right: 5px;
}
.monitor .lakes img,
.monitor .gate img,
.monitor .waterlogging img {
  margin-left: 15px;
}
.water-line {
  color: #199cca;
  margin-left: 10px;
}
.water-line:hover {
  cursor: pointer;
}
/*改变主题的设置*/
.change-them {
  display: none;
  position: fixed;
  bottom: 100px;
  width: 135px;
  z-index: 9;
}
.Zooming:hover {
  cursor: pointer;
}
.right-aside {
  margin: 12px;
}
/**/
/*右缩放*/
.SearchOpen1 {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  /* border-top-left-radius: 10px;
  border-top-right-radius: 10px; */
  height: 32px;
  background: #213477;
}
.SearchOpen1 img:hover {
  cursor: pointer;
}
/*右侧栏左边*/
.right-aside >>> .el-tabs__header {
  height: 94% !important;
  border-right: 1px solid #ebebeb;
  border-bottom: none;
}
/**/
.right-aside >>> .el-tabs__item {
  color: #000;
  font-weight: bold;
  margin-right: 5px;
}
.right-aside >>> .el-tabs__item:hover {
  color: #247df7;
}
.right-aside >>> .is-active {
  color: #213477;
  border-right: 5px solid #213477 !important;
  margin-right: 0;
}
.right-aside >>> .el-tabs__item .el-icon-close {
  display: none;
}
.right-aside >>> .el-tabs__item:hover .el-icon-close {
  display: inline;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: red !important;
}
.fold {
  width: 150px;
}
</style>
<template>
  <div style="height:100%;width:100%;min-width:1280px;">
    <el-header class="top-header">
      <!--从这里开始是头部-->
      <!--logo图片-->
      <img class="logo-img" src="../../static/img/logo_01.png" alt="">
      <!--这里是标题文字-->
      <div class="logo">武汉水务监测信息系统</div>

      <!--top-meun-->
      <el-menu :router="true" :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
        <el-button @click="exit()" type="text" style="margin-right:2%;float:right;color: #fff;line-height: 34px;display: inline-block;margin-left: 10%;"><img src="../assets/img/exit-01.svg" class="nav-img" style="top: 5px;" />退出</el-button>

        <!-- <el-menu-item index="3" style="margin-left:2%;float:right;"><img src="./assets/img/xtgl.svg" class="nav-img" />系统管理</el-menu-item> -->
        <!-- <el-menu-item index="/App/SewagePlantData" style="margin-left:2%;float:right;"><img src="./assets/img/yxjc.svg" class="nav-img" />污水厂实时报表</el-menu-item>
         <el-menu-item index="/App/ReportExport" style="margin-left:2%;float:right;"><img src="./assets/img/yxjc.svg" class="nav-img" />数据报表</el-menu-item> -->
        <el-menu-item index="/App/indexPage" style="margin-left:5%;float:left;"><img src="../assets/img/ssjc.svg" class="nav-img" />首页</el-menu-item>
        <el-menu-item index="/App/MapPage" :route="{ path: '/App/MapPage', query: { type: 'mapPage', }}" style="margin-left:2%;float:left;"><img src="../assets/img/ssjc.svg" class="nav-img" />实时监测</el-menu-item>
        <el-menu-item index="/App/RainMonitor" :route="{ path: '/App/MapPage', query: { type: 'rain', }}" style="margin-left:2%;float:left;"><img src="../assets/img/ssjc.svg" class="nav-img" />实时雨量</el-menu-item>
        <el-menu-item  index="/App/Moint"  style="margin-left:2%;float:left;"><img src="./../assets/img/ssjc.svg" class="nav-img" />站点监测</el-menu-item>
      </el-menu>
    </el-header>
    <!--头部结束-->
    <!-- selectCallback:指定选中点的回调，tracingPointOptions描点的参数 -->
    <!--中间图层模块-->
    <BaseMapComponents v-if="isShow" :selectCallback="selectCallback" @closeOLPopup="()=>{baseMesgIsShow=false}">
      <!-- 点击描点的弹窗 -->
      <ol-popup slot="ol-popup">
        <!--<div style="position: absolute; left: 5px; top: 5px;"><img style="width: 30px;line-height: 50px;" :src="detailData.option['icon-svg']" /></div>-->
        <!-- <component v-if="detailData.option['popup']!=undefined" :is="detailData.option['popup']['component']" :src="detailData.option['popup']['src']" :row="detailData.row" />
        <el-button v-for="(tab,tabKey) in detailData.tabs" :key="tabKey" :loading="openMesageLoading" type="primary" plain @click="baseMesgIsShow=true;openMesageLoading=true;tabActiveName=tabKey">{{tab['name']}}</el-button> -->
        <transition name="fade">
          <!-- 基本数据窗口 -->
          <MessagePanel style="min-width: 700px;" v-show="fromCheckboxIsShow1" v-if="baseMesgIsShow" :active="tabActiveName" @opened-custom="openMesageLoading=false;" :row="detailData.row" :layerid="detailData.id" :tabs="detailData.tabs" />
        </transition>
      </ol-popup>
      <!-- 基本数据窗口 -->
      <transition name="fade">
        <MessagePopupBorder v-drag place="left" v-if="false" :closer="()=>{baseMesgIsShow=false}" :style="{left: '25%',top: '25%','z-index': '3'}" key="base">
          <MessagePanel :active="tabActiveName" @opened-custom="openMesageLoading=false;" :row="detailData.row" :layerid="detailData.id" :tabs="detailData.tabs" />
        </MessagePopupBorder>
      </transition>

      <!-- 固定搜索面板 -->
      <div class="SearchOpen" style="background:#213477" @click="close">
        <img src="../../src/assets/img/zk1-01.svg" style="width:16px;" />
      </div>
      <SearchPopupBorder place="right" key="immobilization" v-show="fromCheckboxIsShow">
        <img src="../../src/assets/img/zk-01.svg" v-if="widthShow != '480'" @click="fromCheckboxIsShow=!fromCheckboxIsShow" style="top: 10px;right:10px;width:16px;float:left;position: absolute;" />
        <div class="SearchOpen1" v-show="fromCheckboxIsShow1">
          <img src="../../src/assets/img/xiangqing-01.svg" @click="changeWidth" style="width:16px;display: inline-block;margin-left: 10px;margin-top: 10px;" />
          <span style="position: relative;bottom:2px;color:#fff;">{{this.value1}}</span>
          <img src="../../src/assets/img/zk1-01.svg" v-if="widthShow != '1150'" @click="changeWidth" style="top: 10px;right: 10px;width:16px;float:left;position: absolute;" />
        </div>
        <!--右侧栏-->
        <CostomVerticalTabs class="right-aside" v-if="layersSelectShow" tabsHeight="540px" :selected="tabSelected" :style="{width:widthShow+'px'}">
          <CostomTabsIteam v-for="(tab) in getTabArray" :key="tab['id']" :slot="tab['id']" :title="tab['name']" :layerId="()=>{
            let obj = {}
            obj[tab['layerGroupId']] = [tab['id']]
            return obj
          }">
            <SearchPanel :querySrc="tab['tableQuerySrc']" :src="tab['tableSrc']" :tableFormat="tab['tableFormat']" :dblClikeRow="(row, event)=>{dblClikeRow(tab['layerGroupId'],tab['id'], row, event)}" />
          </CostomTabsIteam>
        </CostomVerticalTabs>
        <div v-if="!layersSelectShow" style="height: 520px;">
          <SearchPanel v-for="(tab) in getTabArray" :key="tab['id']" :querySrc="tab['tableQuerySrc']" :src="tab['tableSrc']" :tableFormat="tab['tableFormat']" :dblClikeRow="(row, event)=>{dblClikeRow(tab['layerGroupId'],tab['id'], row, event)}" />
        </div>
      </SearchPopupBorder>
      <!--leftNew-->
      <div v-if="$route.query.type === 'mapPage'" class="card-out MapPageLeft">
        <el-card class="box-card" :class="{fold:!show}">
          <div slot="header" class="clearfix">
            <div style="display:inline-block;position:relative;top:2px;">
              <img src="../../src/assets/img/fangdajin1-01.svg" alt="" style="width:16px;">
            </div>
            <span>条件选择</span>
            <img style="float: right; padding:5px;position: relative;bottom:3px;width:16px;" @click="show = !show" src="../../src/assets/img/zk1-01.svg" alt="">
          </div>
          <div>
            <transition style="margin:0;text-aglin:left" name="el-fade-in-linear">
              <div v-show="show" class="transition-box">
                <!-- <div class="card-body-title">站名搜索:
                  <el-input v-model="searchVal" class="seclect-box" size="small" style="width:62%;margin-left:15px;" placeholder="请输入内容" clearable>
                    <el-button style="padding: 0;margin:0" slot="append" icon="el-icon-search" @click="searchRiver()"></el-button>
                  </el-input>
                </div> -->
                <div class="card-body-title"><span style="display: inline-block;margin-bottom:15px">实时监测:</span>
                  <!--position: relative;bottom: 70px;-->
                  <div class="monitor el-menu-vertical-demo" background-color="#040D26" text-color="#FFFFFF" active-text-color="#FFFFFF" :collapse="!layersCheckboxIsShow">
                    <div v-for="(obj, key) in getCheckboxArray" :class="key" :index="key" :key="key">
                      <div v-if="key ==='interaction'">
                        <div class="monitor-detail" :class="item['id']" v-for="(item) in obj.items" :index="item['id']" :key="item['id']">
                          <div @click.prevent="(m,e)=>{myConsole.log(m,e);changeMapPolygonLayersShow(key ,[item['id']],!item['checked'])}">
                            <img :style="{width:layersCheckboxIsShow?'20px':'24px',height:layersCheckboxIsShow?'20px':'24px','padding-left': layersCheckboxIsShow?'4.1px':'12px'}" style="display: inline-block;vertical-align: middle;padding-left: 4.1px;" :src="item['icon-svg']" />
                            <div style="display:inline-block;">
                              <span style=" width: 40px;display: inline-block; text-align: left;">{{item['name']}}</span>
                              <el-checkbox :value="item['checked']" size="medium"></el-checkbox>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
                
                <div class="card-body-title">流域选择:
                  <el-select class="seclect-box" style="width:65%;margin-left:15px;" size="small" v-model="value1" placeholder="请选择流域">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div v-if="waterLine" style="margin-top:0" class="card-body-title">
                  <span style="padding-left:16px">水位线:</span><span @click='getchar()' class="water-line" style="">河道水位线</span>
                </div>
              </div>
            </transition>
          </div>
          <!--水位线-->
          <el-dialog width="600px" :show-close="false" :append-to-body="true" :modal-append-to-body="false" :visible.sync="dialogFormVisible">
            <div style="width: 620px;border-radius: 5px;background:#fff;">
              <div style="width:100%;height:32px;background:#247df7;  border-top-right-radius: 4px;border-top-left-radius: 4px;">
                <a @click="dialogFormVisible = false" class="ol-popup-closer" style="color:#fff;top: 65px;right: -25px;"></a>
              </div>
              <DateDataLineChart style="width: 600px;" :src="this.src1.url" :addition="addition1" :id="this.id" :row="this.row1"></DateDataLineChart>
            </div>
          </el-dialog>
        </el-card>
      </div>
      <!--雨量左侧栏-->
      <div v-if="$route.query.type==='rain'" class="card-out RainLeft">
        <!---->
        <el-card class="box-card" :class="{fold:!show}">
          <div slot="header" class="clearfix">
            <div style="display:inline-block;position:relative;top:2px;">
              <img src="../../src/assets/img/fangdajin1-01.svg" alt="" style="width:16px;">
            </div>
            <span>雨量选择</span>
            <img style="float: right; padding:5px;position: relative;bottom:3px;width:16px;" @click="show = !show" src="../../src/assets/img/zk1-01.svg" alt="">
          </div>
          <div>
            <transition style="margin:0;text-aglin:left" name="el-fade-in-linear">
              <div v-show="show" class="transition-box">
                <div class="card-body-title">
                  <div style="margin-top:0" class="card-body-title">
                    <!--雨量具体区间-->

                    <!-- <div style="margin-bottom:10px;">
                      <div style="display:inline-block;width:120px;text-align:center" v-for="items in rainSection" :key="items.SR1">
                        <span style=" width: 40px;display: inline-block; text-align: left;">{{items.value}}</span>
                        <el-checkbox class='rain-checkBox' size="medium" @change="selectSection(items.checked,items.SR1,items.SR2)"></el-checkbox>
                      </div>
                    </div> -->
                  <div class="monitor el-menu-vertical-demo" background-color="#040D26" text-color="#FFFFFF" active-text-color="#FFFFFF" :collapse="!layersCheckboxIsShow">
                    <div v-for="(obj, key) in getCheckboxArray" :class="key" :index="key" :key="key">
                      <div v-if="key ==='rainfall'">
                        <div class="monitor-detail" :class="item['id']" v-for="(item) in obj.items" :index="item['id']" :key="item['id']">
                          <div @click.prevent="(m,e)=>{myConsole.log(m,e);changeMapPolygonLayersShow(key ,[item['id']],!item['checked'])}">
                            <img :style="{width:layersCheckboxIsShow?'20px':'24px',height:layersCheckboxIsShow?'20px':'24px','padding-left': layersCheckboxIsShow?'4.1px':'12px'}" style="display: inline-block;vertical-align: middle;padding-left: 4.1px;" :src="item['icon-svg']" />
                            <div style="display:inline-block;">
                              <span style=" width: 60px;display: inline-block; text-align: left;">{{item['name']}}</span>
                              <el-checkbox :value="item['checked']" size="medium"></el-checkbox>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>
                  </div>
                    <span style="padding-left:16px">雨量区间:</span><span @click='getchar()' class="water-line" style="">雨量区间详情</span>
                  </div>
                </div>
              </div>
            </transition>
          </div>
          <!--雨量-->
          <el-dialog v-drag width="600px" :show-close="false" :append-to-body="true" :modal-append-to-body="false" :visible.sync="dialogFormVisible">
            <div style="width: 620px;border-radius: 5px;background:#fff;">
              <div style="width:100%;height:32px;background:#247df7;  border-top-right-radius: 4px;border-top-left-radius: 4px;">
                <a @click="dialogFormVisible = false" class="ol-popup-closer" style="color:#fff;top: 65px;right: -25px;"></a>
              </div>
              <RainSection style="width: 600px;" :src="this.src1.url" :addition="addition1" :id="this.id" :row="this.row1"></RainSection>
            </div>
          </el-dialog>
        </el-card>
      </div>

      <!-- 缩放按钮 -->
      <div :style="{right:layersSelectShow?ZoominRight:'16px'}" style="

          bottom: 120px;
          width:26px;
          position: fixed;
          z-index:2;
          background-color:#fff;
          border-radius: 4px;
          text-align: center;
          padding: 4px 0px;    border: 1px solid rgb(7, 82, 113);">
        <!--rgba(4, 13, 38,0.8)-->
        <div class="Zooming" @click="changeMapZoom(true)" style="border-bottom:1px solid #000">
          <!-- <img src="../../src/assets/img/jia-01.svg" style="width:12px;}" /> -->
          <span style="position:relative;bottom:3px;">+</span>
        </div>
        <div class="Zooming" @click="changeMapZoom(false)">
          <!-- <img src="../../src/assets/img/jian-01.svg" style="width:12px;" /> -->
          <span>-</span>
        </div>

      </div>
      <!-- 底图选择 -->
      <div :style="{right:layersSelectShow?ZoominRight:'16px'}" style="
          bottom: 72px;
          width:26px;
          position: fixed;
          z-index:2;
          background-color:#fff;
          border-radius: 4px;
          text-align: center;
          padding: 4px 0px;
          border: 1px solid rgb(7, 82, 113);">
        <!--rgba(4, 13, 38,0.8)-->
        <el-popover placement="right" trigger="click">
          <div style="border: 4px solid hsla(210, 98%, 62%, 0.5);font-size:0; border-radius: 6px;"><img v-for="item in getBaseMapLayers" @click="item.clickFun(getBaseMapLayers)" :key="item.imgsrc" :src="item.imgsrc" height="100px" /></div>
          <div slot="reference" class="Zooming">
            <img src="../../src/assets/img/map-01-01.svg" style="width:12px;" />
          </div>
        </el-popover>

      </div>
      <div class="change-them">
        <el-select v-model="them" placeholder="blue-white">
          <el-option value="deep-blue">deep-blue</el-option>
          <el-option value="blue-white">white-blue</el-option>
        </el-select>
      </div>
    </BaseMapComponents>
  </div>
</template>
<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
// 弹出面板
import SearchPanel from './panels/SearchPanel'
import MessagePanel from './panels/MessagePanel'
import MessagePopupBorder from './map/MessagePopupBorder'
import BaseMapComponents from './map/BaseMapComponents'
import OLPopup from './map/OLPopup'
import SearchPopupBorder from './map/SearchPopupBorder'
import CostomVerticalTabs from './common/costom-tabs/vertical'
import CostomTabsIteam from './common/costom-tabs/tab-iteam'
// 导入描点配置
import { polygonOptions } from './config'
// 水位线
import DateDataLineChart from './page/river/DateDataLineChartFixation'
import RainSection from './page/rain/rainSection'

// import { constants } from 'zlib'

export default {
  name: 'mapPage',
  data () {
    return {
      isShow: false,
      type: '',
      SR1: '',
      SR2: '',
      options: [
        {
          value: '0',
          label: '重庆至武汉河道水情'
        },
        {
          value: '1',
          label: '武汉河道水情'
        }
      ],
      // isRouterAlive控制显示
      isRouterAlive: true,
      activeIndex: '',
      isCollapse: false,
      //
      width: '0px',
      //
      height: '0px',
      routePath: '/',
      value1: '武汉河道水情',
      searchVal: '',
      waterLine: true,
      id: '1',
      dialogFormVisible: false, // 水位线
      src1: {
        url: '/ssjc/yangzt/yangztLive1'
      },
      row1: '1',
      addition1: {
        showKey: 'LE',
        // 时间的键
        dateKey: 'STNM',
        // 展示数据的键
        chartShowKey: 'LE',
        // 时间的键
        chartDateKey: 'STNM'
      },
      them: 'white-blue',
      show: true,
      widthShow: '400',
      myConsole: console,
      timer: null,
      layersSelectShow: true,
      value: 'map-dedicated-ele',
      tabActiveName: '',
      openMesageLoading: false,
      ZoominLeft: '320px',
      ZoominRight: '20px',
      layersCheckboxWidth: '178px',
      layersCheckboxIsShow: true,
      fromCheckboxIsShow: true,
      fromCheckboxIsShow1: true,
      // 标签列表显示或者隐藏
      tagsIsShow: false,
      // 基础信息控制
      baseMesgIsShow: false,
      // 标题
      title: '',
      // 地图数据来源
      mapSourceUrl: '',
      // 地图数据类型
      mapType: '',
      tabSelected: '',
      // 详情页所需数据
      detailData: {
        row: {},
        tabs: {},
        id: '',
        option: {}
      }
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      // 标签卡数组
      'getTabArray',
      // 获取生成图层多选框的数据
      'getCheckboxArray',
      // 获取详情要显示的组件
      'getLayerDetailTabsById',
      // 获取选中点携带的数据
      'selectedFeatureValues',
      'getLayerOption',
      'getBaseMapLayers',
      'getLayerArray',
      'getMapObj'
    ])
  },
  watch: {
    $route () {
      this.$store.commit('hideAllLayers', false)
      if (this.$route.query.type === 'rain') {
        this.value1 = '雨量信息'
        // this.$store.dispatch('changeMapPolygonLayersShow', { group: { interaction: ['river'] }, isShow: false })
        // this.$store.dispatch('changeMapPolygonLayersShow', { group: { interaction: ['rain'] }, isShow: false })
      }
      if (this.$route.query.type === 'mapPage') {
        this.value1 = '武汉河道水情'
        this.waterLine = false
        this.$store.dispatch('changeMapPolygonLayersShow', { group: { interaction: ['river'] }, isShow: true })
        // this.$store.dispatch('changeMapPolygonLayersShow', { group: { interaction: ['rain'] }, isShow: false })
      }
    },
    // 切换主题
    them (them) {
      if (them === 'white-blue') {

      }
      console.log(them)
    },
    show (show) {
      if (show === true) {
        console.log(1)
        this.ZoominLeft = '320px'
        this.ZoominRight = '18px'
      } else {
        console.log(2)
        this.ZoominLeft = '150px'
      }
    },
    value1 (value) {
      if (value === '0') {
        this.getCheckboxArray.waterSystem.items[0].checked = true
        this.waterLine = true
        this.$store.dispatch('changeMapPolygonLayersShow', {
          group: {
            waterSystem: ['changjiang-all']
          },
          isShow: true
        })
        this.loadData()
        this.value1 = '重庆至武汉河道水情'
      }
      if (value === '1') {
        this.getCheckboxArray.waterSystem.items[0].checked = false
        this.waterLine = false
        this.$store.dispatch('changeMapPolygonLayersShow', {
          group: {
            waterSystem: ['changjiang-all']
          },
          isShow: false
        })
        this.loadData()
        this.value1 = '武汉河道水情'
      }
    },
    getTabArray: function () {
      // console.log(this.getTabArray)
      if (this.getTabArray.length > 0) {
        this.fromCheckboxIsShow = true
        // this.selectTab()
        this.tabSelected = this.getTabArray[0]['id']
      } else {
        this.tabSelected = ''
        this.fromCheckboxIsShow = false
      }
    },
    getCheckboxArray () {
      // console.log(this.getCheckboxArray)
      this.$store.dispatch('closeOLPopup', undefined)
    }
  },
  mounted () {
    console.log(this.getCheckboxArray.interaction.items[0].checked)
    if (this.$route.query.type === 'rain') {
      this.value1 = '雨量信息'
      // this.widthShow = 200
    }
    if (this.$route.query.type === 'mapPage') {
      this.waterLine = false
      this.value1 = '武汉河道水情'
    }
    // 图层显示
    this.isShow = true
    this.loadData()
    let _this = this
    Vue.set(_this, 'width', document.documentElement.clientWidth + 'px')
    Vue.set(_this, 'height', document.documentElement.clientHeight - 65 + 'px')
    this.activeIndex = this.$route.path
    _this.selectTab()
    //  this.$store.dispatch('mapUpdateSize', null)
    // 监听窗口大小
    window.onresize = function () {
      Vue.set(_this, 'width', document.documentElement.clientWidth + 'px')
      Vue.set(
        _this,
        'height',
        document.documentElement.clientHeight - 60 + 'px'
      )
    }
  },
  methods: {
    // 选择tab
    selectTab () {
      if (this.$route.query.type === 'rain') {
        // this.$store.dispatch('changeMapPolygonLayersShow', { group: { interaction: ['rain'] }, isShow: true })
      }
      if (this.$route.query.type === 'mapPage') {
        this.$store.dispatch('changeMapPolygonLayersShow', {
          group: {
            waterSystem: ['changjiang-all']
          },
          isShow: false
        })
        // this.$store.dispatch('changeMapPolygonLayersShow', {group: {interaction: ['river']}, isShow: false})
        this.$store.dispatch('changeMapPolygonLayersShow', { group: { interaction: ['yangtz'] }, isShow: true })
        // this.$store.dispatch('changeMapPolygonLayersShow', {group: {interaction: ['rain']}, isShow: true})
      }
    },
    // 水位线
    getchar () {
      this.dialogFormVisible = true
    },
    loadData () {
      if (this.getTabArray.length > 0) {
        this.tabSelected = this.getTabArray[0]['id']
      } else {
        this.tabSelected = ''
      }
    },
    // close
    close () {
      this.fromCheckboxIsShow = !this.fromCheckboxIsShow
      this.widthShow = 480
    },
    changeWidth: function () {
      this.widthShow = 1150
    },
    changeMapZoom (isAdd) {
      this.$store.dispatch('changeMapZoom', isAdd)
    },
    // 双击数据行的回调函数
    dblClikeRow: function (layerGroupId, id, row, event) {
      // 此处绑定数据给信息窗口
      const featureIDKey = this.getLayerOption(layerGroupId, id)['primaryKey']
      // 调用全局状态
      this.$store.dispatch('highlightSelectFeature', {
        featureIDKey,
        featureIDValue: row[featureIDKey],
        layerID: id,
        layerGroupId
      })
      // 获取详情页展示内容
      let tabs = this.getLayerDetailTabsById(layerGroupId, id)
      for (let id in tabs) {
        this.tabActiveName = id
        break
      }
      // 此处组装详情页面所需数据
      // 此处组装详情页面所需数据
      this.$set(this, 'detailData', {
        row,
        tabs,
        id,
        option: this.getLayerOption(layerGroupId, id)
      })
      console.log(this.detailData)
      this.baseMesgIsShow = true
    },
    // 关闭信息窗口
    closer: function () {
      Vue.set(this, 'isShow', false)
    },
    // 点击描点回调函数
    selectCallback: function (layerGroupId, id, row, t) {
      // 获取详情页展示内容
      let tabs = this.getLayerDetailTabsById(layerGroupId, id)
      for (let id in tabs) {
        this.tabActiveName = id
        break
      }
      // 此处组装详情页面所需数据
      this.$set(this, 'detailData', {
        row,
        tabs,
        id,
        option: this.getLayerOption(layerGroupId, id)
      })
      this.baseMesgIsShow = true
      this.widthShow = 435
    },
    changeMapPolygonLayersShow (key, ids, isShow) {
      let group = {}
      group[key] = ids
      this.$store.dispatch('changeMapPolygonLayersShow', { group, isShow })
    },
    // changeTheme (className) {
    //   document.body.className = className
    // },
    // refresh () {
    //   // location.reload()
    //   // this.$router.go(0)
    //   // this.reload()
    // },
    exit () {
      this.logout()
    }
  },
  beforeCreate () {
    // 修改全局主题为地图专用
    // document.body.className = 'map-dedicated-ele'
    // 根据配置创建描点
    // this.$store.dispatch("createPointLayers", tracingPointOptions);
    // 根据配置创建多边形
    this.$store.dispatch('createPolygonLayers', polygonOptions)
  },
  // 组件销毁时
  distroyed: function () {
    // 修改全局主题为原生主题
    // document.body.className = 'original-theme-ele'
  },
  // 注册组件
  components: {
    // 基础地图封装组件
    BaseMapComponents: BaseMapComponents,
    // 搜索列表面板
    SearchPanel: SearchPanel,
    // 信息面板
    MessagePanel: MessagePanel,
    // 面板窗体共通边框
    SearchPopupBorder: SearchPopupBorder,
    // 地图描点点击弹出面板
    'ol-popup': OLPopup,
    // 自定义
    CostomVerticalTabs,
    CostomTabsIteam,
    MessagePopupBorder,
    // 水位线
    DateDataLineChart,
    RainSection
  },
  // 组建接受的传入参数
  props: []
}
</script>
